<template>
  <el-form size="small" inline>
    <el-form-item label="量表日期">
      <el-date-picker
        v-model="date"
        type="date"
        placeholder="Pick a day"
        style="width: 100%"
        size="small"
        :clearable="false"
      />
    </el-form-item>
    <el-form-item label="起止时刻">
      <el-select v-model="hour" size="small" style="width: 120px">
        <el-option
          v-for="item in hourList"
          :key="item.label"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
    <!-- <el-form-item label="扇区建议">
      <el-radio-group v-model="flowStore.useExperimentPolicy" size="small">
        <el-radio-button :value="false">模型Ⅱ</el-radio-button>
        <el-radio-button :value="true">模型Ⅲ(测试)</el-radio-button>
      </el-radio-group>
    </el-form-item> -->
    <el-form-item label="终端区三场数据源">
      <el-radio-group v-model="flowStore.useAirportData" size="small">
        <el-radio-button :value="false">终端区进入量</el-radio-button>
        <el-radio-button :value="true">机场起降架次</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="">
      <el-button type="primary" @click="handleQuery" size="small"
        >生成量表</el-button
      >
      <el-button
        :type="flowStore.classicPolicyScales ? 'success' : 'info'"
        @click="handleExport"
        :disabled="!flowStore.classicPolicyScales"
        size="small"
        >导出为Excel</el-button
      >
    </el-form-item>
  </el-form>

  <el-dialog
    v-model="isLoading"
    :append-to-body="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    :center="true"
    width="280px"
    top="calc(50vh - 150px)"
  >
    <div
      style="
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      "
    >
      <el-icon class="is-loading" :size="128">
        <Loading />
      </el-icon>
      <p style="margin-top: 24px">加载中</p>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import useFlowStore from "@/store/flow.js";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";

import queryData from "./functions/queryData.js";
import fetchData from "./functions/fetchData.js";
import exportExcel from "./functions/exportExcel.js";

const flowStore = useFlowStore();

const hourList = computed(() => {
  let list = new Array();
  for (let i = 0; i < 9; i++) {
    list.push({ label: `${i}时`, value: i });
  }
  return list;
});

const date = ref(new Date());
const hour = ref(4);

onMounted(() => {
  if (dayjs().hour() <= 19) {
    date.value = dayjs().toDate();
  } else {
    date.value = dayjs().add(1, "day").toDate();
  }
});

const isLoading = ref(false);

const handleQuery = () => {
  flowStore.classicPolicyScales = null;
  isLoading.value = true;
  const range = createTimeRange();
  queryData(range)
    .then((res) => {
      setTimeout(() => {
        const result = fetchData({
          ...res,
          useAP: flowStore.useAirportData,
          dataInterval: 4,
          dataStep: 4,
        });
        flowStore.classicPolicyScales = result;
        console.log(flowStore.classicPolicyScales);
        if (!flowStore.classicPolicyScales) {
          ElMessage.warning("出错了，未能检索到数据(⊙o⊙)…");
        } else {
          ElMessage.success("已完成");
        }
        isLoading.value = false;
      }, 200);
    })
    .catch((error) => {
      ElMessage.danger("出错了，未能检索到数据(⊙o⊙)…");
      console.error("handleQuery", error);
      // return false;
    });
};

const handleExport = () => {
  exportExcel({
    targetDate: flowStore.classicPolicyScales.targetDate,
    version: flowStore.classicPolicyScales.version,
    ...flowStore.classicPolicyScales.hourly,
  });
};

const createTimeRange = () => {
  let begTime = dayjs(date.value)
    .hour(hour.value)
    .minute(0)
    .second(0)
    .format("YYYY-MM-DD HH:mm:ss");
  let endTime = dayjs(date.value)
    .add(1, "day")
    .hour(hour.value)
    .minute(0)
    .second(0)
    .format("YYYY-MM-DD HH:mm:ss");
  return { begTime, endTime };
};
</script>
